<template>
  <div class="lunbotu">
    <mt-swipe :auto="3000">
      <!-- 使用v-for一定要使用key -->
      <!-- 将来谁使用此轮播图组件,谁为我们传lunbotuList 
        父组件向子组件传递值
      -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id"
       >
        <img :src="item.img"  :class="{'full':isFull}" />
      </mt-swipe-item>
    </mt-swipe>
  </div>
  <!-- 分析:为什么 商品评论中的轮播图变形了
         1.首页中的图,它的宽高是100%
         2.在商品详情页面中的轮播图,宽高也是100%,会产生变形
         3.商品详情页面的轮播图,期望高度是100%,宽度自适应
         4.经过分析,得到问题的原因,首页中的轮播图和详情页中的轮播图,分歧点是宽度到底是100%还是自适应
         5.定义一个属性,让调用者自己设置宽高
   -->
</template>
 
<script>
export default {
  props:["lunbotuList","isFull"]
};
</script>
 
<style scoped lang = "scss">
.mint-swipe {
  
  height: 200px;
  .mint-swipe-item {
    text-align: center;
    /* 有&表示交集选择器 没有表示后代选择器 */
    img {
     
      height: 100%;
    }
  }

}
 .full{
   width: 100%;
  }
</style>